<template>
<!--  图书修改-->
  <div id="book_manage">
    <el-button @click="$router.push('/addbook')">添加图书</el-button>
    <el-table
        :data="bookList"
        style="width: 100%">
      <el-table-column
          prop="name"
          label="书名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="author"
          label="作者"
          width="180">
      </el-table-column>
      <el-table-column
          prop="cover"
          label="图书封面">
        <template slot-scope="scope">
          <img class="book_cover" :src="scope.row.cover">
        </template>
      </el-table-column>
      <el-table-column
          prop="author"
          label="操作">
        <template slot-scope="scope">
          <el-button @click="updateBook(scope)" type="primary">更新</el-button>
          <el-button @click="removeBook(scope)" type="warning">删除</el-button>
        </template>
      </el-table-column>
    </el-table>




    <el-dialog
        title="更新用户"
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
      <el-form ref="form" :model="newBookObj" label-width="80px" label-position="top">
        <el-form-item label="书名">
          <el-input v-model="newBookObj.name"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBookObj.author"></el-input>
        </el-form-item>
        <el-form-item label="图书库存">
          <el-input v-model="newBookObj.stock"></el-input>
        </el-form-item>
        <el-form-item label="图书封面">
          <el-upload
              class="avatar-uploader"
              :action="`${baseUrl}/api/image/uploadImage`"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <img v-if="newBookObj.cover" :src="newBookObj.cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateBookAgain">确定更新</el-button>
        <el-button @click="centerDialogVisible = false">取消更新</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>
import baseUrl from "../../const/baseUrl";
import {getAllBooks,updateBook,deleteBookById} from "../../network/bookApi";

export default {
  name: "BookManage",
  data(){
    return{
      baseUrl,
      bookList:[],
      newBookObj:{},
      centerDialogVisible:false,
    }
  },
  created() {
    getAllBooks().then((result)=>{
      console.log(result);
      this.bookList=result.data.data;
    }).catch((reason)=>{
      console.log(reason);
    })
  },
  methods:{
  //  更新图书按钮
    updateBook(data){
      this.centerDialogVisible=true;
      this.newBookObj=Object.assign({},data.row);
    },
    //确定更新按钮
    updateBookAgain(){
      updateBook(this.newBookObj).then((result)=>{
        console.log(result);
        console.log(this.newBookObj);
        if (result.data.code === 200) {
          this.$message({
            message: '更新成功!',
            type: 'success'
          });
          sessionStorage.setItem("wlj-url", "/bookmanage");
          this.$router.push("/blankpage");
        }else{
          this.$message({
            message: '更新失败!',
            type: 'warning'
          });
        }
      }).catch((reason)=>{
        console.log(reason);
      });
    },
    //删除图书
    removeBook(data){
      deleteBookById(data.row.id).then((result)=>{
        console.log(result);
        if (result.data.code === 200) {
          this.$message({
            message: '删除成功!',
            type: 'success'
          });
          sessionStorage.setItem("wlj-url", "/bookmanage");
          this.$router.push("/blankpage");
        }else{
          this.$message({
            message: '删除失败!',
            type: 'warning'
          });
        }
      }).catch((reason)=>{
        console.log(reason);
      })
    },
    //图书封面上传
    handleAvatarSuccess(res){
      this.newBookObj.cover=res.data;
    }
  }
}
</script>

<style scoped>
.book_cover{
  height: 150px;
}
.avatar{
  width: 150px;
}
</style>
